<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>基础设置</el-breadcrumb-item>
      <el-breadcrumb-item>会员定制</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <!-- <el-row :gutter="20">
        <el-col :span="5">
          <el-button type="primary" @click="toAddRecommend"
            >添加首页推荐</el-button
          >
        </el-col>
      </el-row> -->

      <!-- 用户列表区域 -->
      <el-table :data="MemberList" border stripe>
        <!-- <el-table-column type="index"></el-table-column> -->
        <el-table-column label="会员名称" prop="name"></el-table-column>
        <el-table-column label="会员价格">
          <template slot-scope="scope">
            {{ scope.row.price / 100 }}元
          </template>
        </el-table-column>
        <el-table-column label="会员折扣">
          <template slot-scope="scope">
            {{ scope.row.discount / 10 }}折
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="toUpMember(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 修改会员的对话框 -->
    <el-dialog
      title="修改会员"
      :visible.sync="editDialogVisible"
      width="500px"
      @close="editDialogClosed"
    >
      <el-form :model="editForm" ref="editFormRef" label-width="100px">
        <!-- <el-form-item label="会员名字:" style="text-align: left">{{ editForm.name }}</el-form-item> -->
        <el-form-item label="会员名字:">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="会员价格">
          <el-input
            v-model="price"
            type="number"
            min="1"
            @mousewheel.native.prevent
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="会员折扣">
          <el-input
            v-model="discount"
            type="number"
            min="1"
            max="10"
            @mousewheel.native.prevent
          >
            <template slot="append">折</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editMemberInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      MemberList: [],
      editForm: {
        name: "",
        price: "",
        discount: "",
      },
      price: 0,
      discount: 0,
      editDialogVisible: false,
    };
  },
  created() {
    //获取首页推荐列表
    this.getMember();
  },
  methods: {
    async getMember() {
      const { data: res } = await this.$http.get("address/listMember");
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("获取会员列表失败！");
      }
      this.MemberList = res.data.members;
      console.log(res);
    },
    async toUpMember(id) {
      const { data: res } = await this.$http.get(
        "address/getMemberById?id=" + id
      );
      if (res.code !== 200) {
        return this.$message.error("查询会员信息失败！");
      }
      this.editForm.id = res.data.member.id;
      this.editForm.name = res.data.member.name;
      this.price = res.data.member.price / 100;
      this.discount = res.data.member.discount / 10;
      this.editDialogVisible = true;
    },
    // 监听修改配料对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    editMemberInfo() {
      console.log(this.price);
      console.log(this.discount);
      this.$refs.editFormRef.validate(async (valid) => {
        if (this.price <= 0) {
          return this.$message.error("注意会员价格！");
        }
        if (this.discount <= 0 || this.discount > 10) {
          return this.$message.error("注意会员折扣！");
        }
        // if (!valid) return;
        this.editForm.price = this.price * 100;
        this.editForm.discount = this.discount * 10;
        // 发起修改的数据请求
        const { data: res } = await this.$http.post(
          "address/updateMember",
          this.editForm
        );
        console.log(res);
        if (res.code !== 200) {
          return this.$message.error("修改会员失败！");
        }

        // 关闭对话框
        this.editDialogVisible = false;
        // this.price = 0;
        // 刷新数据列表
        this.getMember();
        // 提示修改成功
        this.$message.success("修改会员成功！");
      });
    },
  },
};
</script>

<style lang="less" scoped>
.button:hover {
  background-color: rgb(64, 158, 255);
  color: rgb(255, 255, 255);
}
</style>
